<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试通过ajax在页面中加载数据</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#showStudentInfo").hover(
                function () {
                    $.post(
                        "${pageContext.request.contextPath}/showStudentInfo",
                        {},
                        function (obj) {
                            var table = "<table>";
                            table += "<tr><th colspan='5'>学生信息</th></tr>";
                            table += "<tr><th>学生编号</th><th>学生姓名</th><th>年龄</th><th>性别</th><th>邮箱</th></tr>";
                            for(var i in obj){
                                var student = obj[i];
                                table += "<tr><td>"+student.id+"</td><td>"+student.sname+"</td><td>"+student.age+"</td><td>"+student.sex+"</td><td>"+student.email+"</td></tr>";
                            }
                            table += "</table>";
                            $("#showInfo").html(table);
                        },
                        "json"
                    );
                },
                function () {
                    $("#showInfo").empty();
                }
            );
        });
    </script>
</head>
<body>
<span id="showStudentInfo" style="background-color: red;">学生信息</span>
<span id="showUserInfo" style="background-color: red;">用户信息</span>
<div id="showInfo"></div>
</body>
</html>
